<template>
  <div class="slot_container">
    <slot1>
      <p>p标签产生文字</p>
    </slot1>
    <hr>
    <slot2>
      <template v-slot:header>这是头部内容</template>
      <template v-slot:content>这个主体内容</template>
      <template v-slot:footer>这个底部内容</template>
      <template v-slot:default="defaultSlot">{{defaultSlot.slot2.msg}}</template>
    </slot2>
     <hr>
    <slot3 title="菜单">
      <template v-slot="scope">
        {{scope}}
        <li v-for="(foodsItem,foodsIndex) in scope.foods" :key="foodsIndex+ 'foods'">{{foodsItem}}</li>
        <li v-for="(gamesItem,gamesIndex) in scope.games" :key="gamesIndex+ 'games'">{{gamesItem}}</li>
        <li v-for="(item,index) in scope.films" :key="index">{{item}}</li>
      </template>
    </slot3>
     <hr>
    <h1>插槽的高级用法</h1>
    <slot4 title="具名作用域插槽">
      <!-- v-slot:header 缩写为 #header -->
      <template #header="scope">{{scope}}</template>
      <template #content="scope">{{scope}}</template>
      <template #footer="scope">{{scope}}</template>
    </slot4>
     <hr>
    <slot5>
      <template #defultName>默认内容</template>
      <template #customName>自定义内容</template>
    </slot5>
    <hr />
    <br />
    <h3>折叠卡片</h3>
    <slot6 v-model="open">
      <template #default>
        <div class="layer">
          <div>{{ msg }}</div>
          <div>{{ msg }}</div>
        </div>
        <div class="layer">
          <div>{{ msg }}</div>
          <div>{{ msg }}</div>
        </div>
      </template>
      <template #fold>
        <div class="layer">
          <div>{{ msg }}</div>
          <div>{{ msg }}</div>
        </div>
        <div class="layer">
          <div>{{ msg }}</div>
          <div>{{ msg }}</div>
        </div>
      </template>
    </slot6>
  </div>
</template>
<script>
import slot1 from '@/components/Slot/slot1'
import slot2 from '@/components/Slot/slot2'
import slot3 from '@/components/Slot/slot3'
import slot4 from '@/components/Slot/slot4'
import slot5 from '@/components/Slot/slot5'
import slot6 from '@/components/Slot/slot6'
export default {
  name: 'SlotDemo',
  components: { slot1, slot2, slot3, slot4, slot5, slot6 },
  data() {
    return {
      msg: `浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
			`,
      open: false
    }
  },
}
</script>
<style lang="less" scoped>
.layer{
  display:flex;
  justify-content: space-around;
  div{
    width: 47%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
hr{
  margin: 20px 0px;
}
</style>